<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-07-21 18:32:01
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-21 18:39:55
 * @FilePath: \大宗买卖\ebuy\src\components\SupplierBar\link-bar\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
    <div class="link-box">
        <div class="link-bar">
            <a @click="toSupplier('index')">
                <span>首页</span>
                <div class="bar"></div>
            </a>
            <a @click="toSupplier('supplyProducts')">
                <span>产品供应</span>
                <div class="bar"></div>
            </a>
            <a @click="toSupplier('supplierArchives')">
                <span>企业档案</span>
                <div class="bar"></div>
            </a>
            <a @click="toSupplier('supplierRecent')">
                <span>企业动态</span>
                <div class="bar"></div>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        toSupplier(destination){
            this.$router.push({
                path : '/supplier',
                query : {
                    destination,
                    watchId : Math.floor(Math.random() * 1000) //区分每一次路由跳转
                },
            }).catch(err => {
                this.$router.go(0)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.link-box{
    // border-top: 1px solid rgb(243, 243, 243);
    // box-shadow: rgb(238 238 238) 0px 1px 0px 0px;
    background-color: #fff;
    z-index: 3;
    position: sticky;
    top: 0;
    .link-bar{
        display: flex;
        justify-content: space-around;
        width: @width-content;
        margin: 0 auto;
        height: 50px;
        font-size: 20px;
        &:hover{
            cursor: default;
        }
        a:hover .bar{
            width: 100%;
        }
        a{
            flex: 1;
            box-sizing: border-box;
            height: 100%;
            float: left;
            margin: 0 20px;
            text-decoration: none;
            span{
                display: inline-block;
                width: 100%;
                height: 100%;
                line-height: 50px;
                text-align: center;
                vertical-align: middle;
            }
            .bar{
                width: 0;
                height: 2px;
                background-color: rgb(71,204,71);
                transition: width 1s;
            }
        }
    }
}
</style>